<template>
    <div style="background-color:#f1f1f1">
        <mt-header title="选择红包">
            <router-link to="/account" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="redBox" v-for="(item,index) in redBagList" :key="index" @click.prevent="chooseRedBag(item)">
            <div class="reductionBox">
                <p class="use">￥{{item.reduction/100}}</p>
                <p>满{{item.fullReduction/100}}可用</p>
            </div>
            <div class="messageBox">
                <p class="title" v-if="item.shopId!=0">{{item.shopName}}专用红包</p>
                <p class="title" v-if="item.shopId==0">通用红包</p>
                <p>{{item.startTime}}到{{item.endTime}}</p>
            </div>
            <div class="defaultBox">
                <p v-if="item.redParperId!=redBag.redParperId"></p>
                <p v-if="item.redParperId==redBag.redParperId">√</p>
            </div>
        </div>
        <p class="cannotUse" @click="closeOrOpen" v-if="!closeCannotUse&&cannoUseRedBagNum!=0">有{{cannoUseRedBagNum}}个红包不可使用，点击展开</p>
        <div v-if="closeCannotUse">
            <div class="cannotUseBox" v-for="(item,index) in cannotUseRedBag" :key="index">
                <div class="reductionBox">
                    <p class="use">￥{{item.reduction/100}}</p>
                    <p>满{{item.fullReduction/100}}可用</p>
                </div>
                <div class="messageBox">
                    <p class="title" v-if="item.shopId!=0">{{item.shopName}}专用红包</p>
                    <p class="title" v-if="item.shopId==0">通用红包</p>
                    <p>{{item.startTime}}到{{item.endTime}}</p>
                </div>
                <div class="defaultBox"><p></p></div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState,mapMutations} from 'vuex'
    export default{
        data(){
            return{
                closeCannotUse:false,
                redBagList:[],
                defaultRedBag:"",
                cannotUseRedBag:[],
                cannoUseRedBagNum:0
            }
        },
        methods:{
            ...mapMutations(['setRedBag']),
            closeOrOpen(){
                this.closeCannotUse=!this.closeCannotUse;
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                let postData={
                    shopId:1,
                    cost:this.cartMessage.sum
                };
                this.getRequest('/redPaper/getNoUseRedParper',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        let list=response.obj;
                        for(let i=0;i<list.length;i++){
                            list[i].startTime=list[i].startTime.replace(/T/," ");
                            list[i].endTime=list[i].endTime.replace(/T/," ");
                            list[i].startTime=list[i].startTime.slice(0,16);
                            list[i].endTime=list[i].endTime.slice(0,16);
                        }
                        this.cannotUseRedBag=list;
                    }
                })
            },
            getCannotUseRedBagNum(){
                let tokenStr=window.sessionStorage.getItem("tokenStr");
                let postData={
                    shopId:1,
                     cost:this.cartMessage.sum
                }
                this.getRequest('/redPaper/getNoUseRedParperNumber',postData,tokenStr).then(response=>{
                    if(response.code==200)
                        this.cannoUseRedBagNum=response.obj;
                })
            },
            chooseRedBag(item){
                if(this.redBag.redParperId==null||this.redBag.redParperId!=item.redParperId)
                    this.setRedBag(item);
                else{
                    let obj={};
                    this.setRedBag(obj);
                }
                this.$router.push('account');
            }
        },
        computed:{
            ...mapState(['cartMessage','redBag'])
        },
        mounted(){
            //获取不能用红包的个数
            this.getCannotUseRedBagNum();
            let tokenStr=window.sessionStorage.getItem("tokenStr");
            let postData={
                shopId:1,
                cost:this.cartMessage.sum
            };
            this.getRequest('/redPaper/getUseRedParper',postData,tokenStr).then(response=>{
                if(response.code==200){
                    let list=response.obj;
                    for(let i=0;i<list.length;i++){
                        list[i].startTime=list[i].startTime.replace(/T/," ");
                        list[i].endTime=list[i].endTime.replace(/T/," ");
                        list[i].startTime=list[i].startTime.slice(0,16);
                        list[i].endTime=list[i].endTime.slice(0,16);
                    }
                    this.redBagList=list;
                }
            })
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    /deep/ .el-tabs__item{
        font-size:18px;
    }
    /deep/ .el-tabs__header{
        margin:0;
    }
    /deep/ .el-tabs__nav{
        padding:0.2rem;
    }
    .container{
        @include width-height(100%,70vh);
    }
    .redBox{
        display: grid;
        @include width-height(100%,5rem);
        grid-template-columns: 25% 62% 13%;
        grid-template-rows: 100%;
        padding-top: 0.5rem;
        background-color: #fff;
        border-radius: 1rem;
        border:1px solid #f1f1f1;
        p{
            @include font-size-color(1rem,#666);
        }
        .messageBox{
            .title{
                padding-top: 0.5rem;
                @include font-size-color(1.2rem,#000);
                font-weight: bold;
            }
            p{
                padding-top: 0.5rem;
            }
        }
        .reductionBox{
            text-align: center;
            position: relative;
            .use{
                padding-top: 0.2rem;
                @include font-size-color(1.8rem,rgba(231, 73, 25, 0.87));
                font-weight: bold;
            }
        }
        .defaultBox{
            position: relative;
            p{
                position: absolute;
                top:30%;
                right:1rem;
                @include width-height(1.2rem,1.2rem);
                @include white;
                border-radius: 50%;
                text-align: center;
                line-height: 1.2rem;
                @include font-size-color(1.2rem,#666);
                font-weight: bold;
                border:1px solid #666;
            }
        }
    }
    .cannotUse{
        @include font-size-color(1.2rem,#666);
        @include width-height(100%,1.8rem);
        padding: 0.3rem 0 0 0.5rem;
    }
    .cannotUseBox{
        display: grid;
        @include width-height(100%,5rem);
        grid-template-columns: 25% 60% 15%;
        grid-template-rows: 100%;
        padding-top: 0.5rem;
        background-color: #fff;
        border-radius: 1rem;
        border:1px solid #f1f1f1;
        p{
            @include font-size-color(1rem,#666);
        }
        .messageBox{
            .title{
                padding-top: 0.5rem;
                @include font-size-color(1.2rem,#888);
                font-weight: bold;
            }
            p{
                padding-top: 0.5rem;
            }
        }
        .reductionBox{
            text-align: center;
            position: relative;
            .use{
                padding-top: 0.2rem;
                @include font-size-color(1.8rem,#888);
                font-weight: bold;
            }
        }
        .defaultBox{
            position: relative;
            p{
                position: absolute;
                top:30%;
                right:1rem;
                @include width-height(1.2rem,1.2rem);
                @include white;
                border-radius: 50%;
                text-align: center;
                line-height: 1.2rem;
                @include font-size-color(1.2rem,#666);
                font-weight: bold;
                border:1px solid #666;
            }
        }
    }
</style>
